<template>
  <div :class="[ns.b()]" ref="tableWrapper" @click="handleWrapperClick">
    <div :class="ns.e('title')">
      <span
        v-if="showTitle"
        :class="ns.e('title-label')"
        :style="{ fontSize: titleFont }"
        >{{ title }}</span
      >
      <span v-if="explainShow && explainPosition == 'default'">{{
        explainText
      }}</span>
    </div>
    <MdTablePro
      :class="ns.e('table')"
      autoFill
      height="100%"
      :key="tableKey"
      :border="tableBorder"
      :headerCellStyle="headerCellStyle"
      :cell-style="cellStyle"
      :rowClassName="rowClassName"
      rowKey="id"
      :columns="tableColumns"
      :stripe="tableStripe"
      :pagination="pagination"
      :onFetch="handleFetch"
      :row-height="rowHeight"
      ref="tableRef"
      :showPagination="false"
      @cellClick="handleClick"
    >
    </MdTablePro>
    <div :class="ns.e('footer')">
      <span v-if="explainShow && explainPosition == 'left'">{{
        explainText
      }}</span>
    </div>
  </div>
</template>

<script setup>
import { ref, nextTick, reactive, onMounted, inject } from 'vue';
import { MdTablePro } from '@mdfe/medi-ui-pro';
import { useNamespace } from '@mdfe/medi-ui';
import useTable from './useTable.js';

defineOptions({
  name: 'mic-table-block',
  components: { MdTablePro },
});

const ns = useNamespace('table-pane');

const emit = defineEmits(['set', 'click']);
// const { widgetWDList, widgetZBList } = inject('$widget');
const props = defineProps({
  isComp: {
    type: Boolean,
    default: false,
  },
  widget: Object,
});

const { widgetObj, dataTable, getTableData, handleFetch } = useTable('table');

const tableColumns = ref([{}]);

const headerCellStyle = reactive({});
const cellStyle = reactive({});
const tableBorder = ref(true);
const tableStripe = ref(false);
const tableOverflow = ref(false);
const columnsFixed = ref(0);
const rowClassName = ref('');
const tableKey = ref(1);
const rowHeight = ref(undefined);
const pagination = ref(undefined);
const searchCallback = ref(undefined);
const tableWrapper = ref();
const tableRef = ref();

const title = ref('表格');
const titleFont = ref('14');
const showTitle = ref(true);

const explainShow = ref(true);
const explainPosition = ref('default');
const explainText = ref('');

function handleClick(row, column, cell, event) {
  console.log(row, column, cell, event);
}
function handleWrapperClick(event) {
  emit('click', event);
}
function setOption(options) {
  const {
    theme,
    tableFixed,
    tableHeaderFont,
    tableFont,
    overflowTable,
    commonShowTitle,
    commonTitleName,
    commonTitleFont,
    commonExplainShow,
    commonExplainPosition,
    commonExplainText,
  } = options || {};

  showTitle.value = commonShowTitle;
  title.value = commonTitleName;
  titleFont.value = commonTitleFont + 'px';
  explainShow.value = commonExplainShow;
  explainPosition.value = commonExplainPosition;
  explainText.value = commonExplainText;

  headerCellStyle.backgroundColor = theme[0];
  headerCellStyle.fontSize = tableHeaderFont + 'px';
  cellStyle.fontSize = tableFont + 'px';
  tableBorder.value = options.tableBorder;
  tableStripe.value = options.tableStripe;
  if (tableFixed.check) {
    columnsFixed.value = tableFixed.count;
  }
  tableOverflow.value = overflowTable;

  if (searchCallback.value) {
    nextTick(() => {
      searchCallback.value();
    });
  }
}

function setColumns() {
  // const {} = columnsFixed.value;
  const columns = [];
  if (
    widgetObj.value.xuanZhongWDList &&
    widgetObj.value.xuanZhongWDList.length
  ) {
    columns.push({
      prop: 'currentValue',
      label: widgetObj.value.xuanZhongWDList[0].ziDuanMC,
      minWidth: '120px',
      align: 'left',
    });
  }
  widgetObj.value.xuanZhongZBList.forEach((element) => {
    columns.push({
      prop: element.ziDuanMC,
      label: element.ziDuanMC,
      minWidth: '120px',
      align: 'right',
    });
  });

  tableColumns.value = columns;
}

async function search(...args) {
  const { dataTree } = await getTableData(...args);
  setColumns();

  const dealData = (data) => {
    if (!data) return [];
    const list = [];
    data.forEach((item, index) => {
      const obj = {
        id: item.currentLuJing + index,
        currentValue: item.currentValue,
        ...item.zhiBiaoMap,
      };
      if (item.children && item.children.length) {
        obj.children = dealData(item.children);
      }
      list.push(obj);
    });
    return list;
  };

  dataTable.value = dealData(dataTree);

  tableRef.value.search();
}

onMounted(() => {
  emit('set', true);
  if (props.isComp) {
    search(props.widget.gongChengSJJID, props.widget);
  }
});

defineExpose({
  setOption,
  search,
  setColumns,
  widget: props.widget,
});
</script>

<style lang="scss" scoped>
@include c('table-pane') {
  width: 100%;
  height: 100%;
  overflow: scroll;
  display: flex;
  flex-direction: column;
  @include e('table') {
    width: 100%;
    box-sizing: border-box;
  }

  @include e('title') {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: var(--md-spacing-2);
  }
  @include e('title-label') {
    color: #222;
    font-size: var(--md-font-3);
  }
}
</style>

<!-- <style lang="scss" scoped>
@include c('custom-table-cell') {
  display: flex;
  align-items: center;
  justify-content: space-between;

  @include c('icon-gengduo') {
    display: none;
  }
  &:hover {
    @include c('icon-gengduo') {
      display: block;
    }
  }
}
.table-pane {
  // &.fabric-table {
  //   position: fixed;
  //   left: 0;
  //   top: 0;
  //   width: 0;
  //   height: 0;
  //   background-color: #fff;
  // }

  .#{$md-prefix}-table .#{$md-prefix}-base-table__header tr {
    th > .cell {
      // font-family: var(--bi-table-title-font-style, 'inherit');
      font-size: var(--bi-table-title-font-size, 'inherit');
      // line-height: var(--bi-table-title-line-height, 'inherit');
    }

    &.is-bold th > .cell {
      font-weight: bolder;
    }

    &.is-lighter th > .cell {
      font-weight: lighter;
    }

    &.is-italic th > .cell {
      font-style: italic;
    }

    &.is-underline th > .cell {
      text-decoration: underline;
    }

    &.is-left th > .cell {
      text-align: left;
    }

    &.is-center th > .cell {
      text-align: center;
    }

    &.is-right th > .cell {
      text-align: right;
    }

    &.is-nowrap th > .cell {
      white-space: nowrap;
    }
  }

  .#{$md-prefix}-table .#{$md-prefix}-base-table__body tr {
    td > .cell {
      font-size: var(--bi-table-body-font-size, 'inherit');
      // font-family: var(--bi-table-body-font-style, 'inherit');
      // font-style: var(--bi-table-body-italic, 'normal');
      // line-height: var(--bi-table-body-line-height, 'inherit');
    }

    &.is-bold td > .cell {
      font-weight: bolder;
    }

    &.is-italic td > .cell {
      font-style: italic;
    }

    &.is-underline td > .cell {
      text-decoration: underline;
    }

    &.is-left td > .cell {
      text-align: left;
    }

    &.is-center td > .cell {
      text-align: center;
    }

    &.is-right td > .cell {
      text-align: right;
    }

    &.is-line-through td > .cell {
      text-decoration: line-through;
    }
  }
}
</style> -->
